<style lang="scss" scoped>

@import 'src/style/mixin';
.rating_page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    z-index: 204;
    padding-top: 1.95rem;
    p,
    span {
        font-family: Helvetica Neue, Tahoma, Arial;
    }
}

.header_style {
    @include sc(.65rem, #333);
    line-height: 2rem;
}

.quick_remark {
    background-color: #fff;
    margin-top: .4rem;
    padding: 0 .6rem 1rem;
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            margin-right: .6rem;
            margin-bottom: .6rem;
            span {
                @include sc(.6rem, #333);
                padding: .3rem .6rem;
                border: 0.025rem solid #3190e8;
                border-left: 0;
            }
            .first {
                border-left: 0.025rem solid #3190e8;
                border-top-left-radius: .2rem;
                border-bottom-left-radius: .2rem;
            }
            .last {
                border-top-right-radius: .2rem;
                border-bottom-right-radius: .2rem;
            }
            .choosed {
                color: #fff;
                background-color: #3190e8;
            }
        }
    }
}

.input_remark {
    background-color: #fff;
    .input_text {
        width: 100%;
        background-color: #f9f9f9;
        border: 0.025rem solid #eee;
        resize: none;
        min-height: 4.5rem;
        border-radius: .2rem;
        @include sc(.6rem, #666);
        padding: .5rem;
    }
}

.determine {
    background-color: #4cd964;
    @include sc(.7rem, #fff);
    text-align: center;
    margin: 0 .7rem;
    line-height: 1.8rem;
    border-radius: 0.2rem;
}

</style>

<template lang="html">

<div class="rating_page">
    <head-top head-title="订单备注" go-back='true'></head-top>
    <section class="quick_remark" v-if="remarkList.remarks.length">
        <header class="header_style">快速备注</header>
        <ul class="remark_arr_list_ul">
            <li class="remark_arr_list_li" v-for="(item,index) in remarkList.remarks" :key="index">
                <!-- <span :class="{first: remarkIndex == 0, last: remarkIndex == item.length - 1, choosed: remarkText[index]&&(remarkText[index][0] == remarkIndex)}" class="remark_item_li" v-for="(remarkTtem, remarkIndex) in item" :key="remarkIndex" @click="chooseRemark(index, remarkIndex, remarkTtem)">{{remarkTtem}}</span> -->
                <span :class="{first: remarkIndex == 0, last: remarkIndex == item.length - 1, choosed: remarkText[index]&&(remarkText[index][0] == remarkIndex)}" class="remark_item_li" v-for="(remarkTtem, remarkIndex) in item" :key="remarkIndex" @click="chooseRemark(index, remarkIndex, remarkTtem)">{{remarkTtem}}</span>
            </li>
        </ul>
    </section>
    <div class="determine" @click="confirmRemark">确定</div>
</div>

</template>

<script>

import headTop from '../../../components/header/head'
export default {
    components: {
        headTop
    },
    data() {
        return {
            remarkList: {
                "remarks": [
                    [
                        "不要辣",
                        "少点辣",
                        "多点辣"
                    ],
                    [
                        "不要香菜"
                    ],
                    [
                        "不要洋葱"
                    ],
                    [
                        "多点醋"
                    ],
                    [
                        "多点葱"
                    ],
                    [
                        "去冰",
                        "少冰"
                    ]
                ]
            },
            remarkText: {},
        }
    },
    methods:{
      //选择备注
            chooseRemark(index, remarkIndex, text){
              // console.log(index)
              // console.log(remarkIndex)
              // console.log(text)
                this.remarkText[index] = [remarkIndex, text];
                console.log(this.remarkText)
                this.remarkText = Object.assign({}, this.remarkText);

            },
            //确认选择
            confirmRemark(){
                // this.CONFIRM_REMARK({remarkText: this.remarkText, inputText: this.inputText});
                // this.$router.go(-1);
            }
    }
}

</script>
